<!--<script>-->
<!--    import { TreeView } from "carbon-components-svelte";-->
<!--    import WatsonMachineLearning from "carbon-icons-svelte/lib/WatsonMachineLearning.svelte";-->
<!--    import Analytics from "carbon-icons-svelte/lib/Analytics.svelte";-->
<!--    import Blockchain from "carbon-icons-svelte/lib/Blockchain.svelte";-->
<!--    import DataBase from "carbon-icons-svelte/lib/DataBase.svelte";-->
<!--    import SignalStrength from "carbon-icons-svelte/lib/SignalStrength.svelte";-->
<!--    import DocumentDownload from "carbon-icons-svelte/lib/DocumentDownload.svelte";-->
<!--    import Folders from "carbon-icons-svelte/lib/Folders.svelte";-->
<!--    import {Badge, Button, Input, Modal, useSvelteUITheme} from "@svelteuidev/core";-->
<!--    const theme = useSvelteUITheme();-->
<!--    import {MagnifyingGlass} from "radix-icons-svelte";-->
<!--    import {FileDropzone} from "attractions";-->
<!--    import {onMount} from "svelte";-->
<!--    import {files} from "../store.js";-->

<!--    // let files=[]-->

<!--    let activeId = 1;-->
<!--    let selectedIds = [];-->
<!--    let children = [-->
<!--        // { id: 0, text: "AI / Machine learning", icon: WatsonMachineLearning },-->
<!--        {-->
<!--            id: 1,-->
<!--            text: "Analytics",-->
<!--            icon: Folders,-->
<!--            expanded: true,-->
<!--            children: [-->
<!--                {-->
<!--                    id: 2,-->
<!--                    text: "IBM Analytics Engine",-->
<!--                    icon: Analytics,-->
<!--                    expanded: true,-->
<!--                    children: [-->
<!--                        { id: 3, text: "Apache Spark", icon: Analytics },-->
<!--                        { id: 4, text: "Hadoop", icon: Analytics },-->
<!--                    ],-->
<!--                },-->
<!--                { id: 5, text: "IBM Cloud SQL Query", icon: Analytics },-->
<!--                { id: 6, text: "IBM Db2 Warehouse on Cloud", icon: Analytics },-->
<!--            ],-->
<!--        },-->
<!--        {-->
<!--            id: 7,-->
<!--            text: "Blockchain",-->
<!--            icon: Blockchain,-->
<!--            children: [{ id: 8, text: "IBM Blockchain Platform", icon: Blockchain }],-->
<!--        },-->
<!--        {-->
<!--            id: 9,-->
<!--            text: "Databases",-->
<!--            icon: DocumentDownload,-->
<!--            children: [-->
<!--                {-->
<!--                    id: 10,-->
<!--                    text: "IBM Cloud Databases for Elasticsearch",-->
<!--                    icon: DataBase,-->
<!--                },-->
<!--                {-->
<!--                    id: 11,-->
<!--                    text: "IBM Cloud Databases for Enterprise DB",-->
<!--                    icon: DataBase,-->
<!--                },-->
<!--                { id: 12, text: "IBM Cloud Databases for MongoDB", icon: DataBase },-->
<!--                {-->
<!--                    id: 13,-->
<!--                    text: "IBM Cloud Databases for PostgreSQL",-->
<!--                    icon: DataBase,-->
<!--                },-->
<!--            ],-->
<!--        },-->
<!--        {-->
<!--            id: 14,-->
<!--            text: "Integration",-->
<!--            icon: SignalStrength,-->
<!--            disabled: true,-->
<!--            children: [-->
<!--                {-->
<!--                    id: 15,-->
<!--                    text: "IBM API Connect",-->
<!--                    icon: SignalStrength,-->
<!--                    disabled: true,-->
<!--                },-->
<!--            ],-->
<!--        },-->
<!--    ];-->
<!--    let mBtn;-->
<!--    let dBtn;-->
<!--    let opened = false;-->
<!--</script>-->


<!--<span>-->
<!--    <Modal-->
<!--            {opened}-->
<!--            on:close={() => (opened = false)}-->
<!--            title="Upload File!"-->
<!--            overlayOpacity={0.55}-->
<!--            overlayBlur={3}-->
<!--    >-->
<!--        <FileDropzone />-->
<!--        <div style="margin-top: 20px">-->
<!--            <Button fullSize>上传</Button>-->
<!--        </div>-->
<!--</Modal>-->

<!--<Input-->
<!--        icon={MagnifyingGlass}-->
<!--        placeholder='Search'-->
<!--        rightSectionWidth={70}-->
<!--        styles={{ rightSection: { pointerEvents: 'none' }}}-->
<!--        style="margin: 5px 5px 10px 5px"-->
<!--&gt;-->
<!--    <Badge slot='rightSection' color='blue' variant='filled' size="sm">-->
<!--        search-->
<!--    </Badge>-->
<!--    &lt;!&ndash;    <Button slot='rightSection' variant="gradient" color="blue">搜索</Button>&ndash;&gt;-->
<!--</Input>-->
<!--    <div style="display: flex;justify-content: flex-end">-->
<!--    <Button on:click={() => (opened = true)} disabled={mBtn} variant='gradient' color="blue" style="margin: 5px">upload</Button>-->
<!--    <Button disabled={dBtn} variant='outline' color="red" style="margin: 5px">delete</Button>-->
<!--    </div>-->
<!--</span>-->

<!--<TreeView-->

<!--        labelText="Cloud Products"-->
<!--        {$files}-->
<!--        bind:activeId-->
<!--        bind:selectedIds-->
<!--        on:select={({ detail }) => console.log("select", detail)}-->
<!--        on:toggle={({ detail }) => console.log("toggle", detail)}-->
<!--        on:focus={({ detail }) => console.log("focus", detail)}-->
<!--/>-->

<!--<div>Active node id: {activeId}</div>-->
<!--<div>Selected ids: {JSON.stringify(selectedIds)}</div>-->

<!--<style>-->
<!--    div {-->
<!--        margin-top: var(&#45;&#45;cds-spacing-05);-->
<!--    }-->
<!--</style>-->

<!--<svelte:head>-->
<!--    <link-->
<!--            rel="stylesheet"-->
<!--            href="https://unpkg.com/carbon-components-svelte/css/white.css"-->
<!--    />-->
<!--</svelte:head>-->


<script>
    import {DataTable, InlineNotification, ToastNotification} from "carbon-components-svelte";
    import {Alert, Badge, Button, Input, Modal} from "@svelteuidev/core";
    import {InfoCircled, MagnifyingGlass} from "radix-icons-svelte";
    import {onMount} from "svelte";
    import {fileList, users} from "../store.js";
    import {FileDropzone} from "attractions";

    import {
        Modal as AModal,
        Dialog as ADialog
    } from "attractions";


    let allFiles=[]
    let mBtn=true
    let dBtn=false

    $: mBtnStyle={
        disabled:mBtn
    }
    $: dBtnStyle={
        disabled: dBtn
    }


    function getFile(){
        fetch("/api/getfile",{
            method:"Get",
        }).then((res)=>{
            // console.log(res)
            return res.json()
        }).then((res)=>{
            fileList.update((cur)=>{
                allFiles=res.files
                allFiles.forEach((item,index)=>{
                    item['id']=item['name']
                })
                // return useRows
                console.log(allFiles)
                return res.files
            })
        })
    }
    onMount(
        async ()=>{
            getFile()
        },
        // console.log($users)
    )
    let opened = false;
    let open=false;

    let expandedRowIds = [];
    let selectedRowIds = [];

    $: {
        console.log("expandedRowIds", expandedRowIds);
        console.log("selectedRowIds", selectedRowIds);
        if(selectedRowIds.length===1){
            mBtn=false
            dBtn=false
        }else if(selectedRowIds.length!==0){
            dBtn=false
            mBtn=false
        }else{
            mBtn=true
            dBtn=true
        }
    }

    function delFile() {
        selectedRowIds.forEach((item, index) => {
            let name = item
            fetch("/api/delfile", {
                method: "Post",
                body: JSON.stringify({
                    file: name
                })
            }).then((r) => {
                return r.json()
            }).then((r) => {
                console.log(r)
                if (r.status === 0) {
                    alert.msg = 'delete file success!'
                    alert.color='green'
                    openAlert = true
                    open=false
                } else {
                    alert.msg = 'delete file error!'
                    alert.color='red'
                    openAlert = true
                    open=false
                }
            })
        })
    }

    let files=[];
    function upload() {
        console.log(files)
        if (files.length > 0) {
            let formData = new FormData();
            for (let file of files) {
                formData.append("file", file);
            }
            fetch("/api/fileupload",{
                method:"post",
                // headers:new Headers({
                //     'Content-Type':"multipart/form-data",
                // }),
                body:formData
            }).then((res)=>{
                console.log(res)
                return res.json()
            }).then((r)=>{
                if(r.status===0){
                    console.log(r)
                    alert.msg='upload file success!'
                    alert.color='green'
                    openAlert=true
                    opened=false
                }
            })
        }

    }


    function downloadFile() {
        selectedRowIds.forEach((item,index)=>{
            let name=item
            fetch("/api/downloadfile",{
                method:'Post',
                body:JSON.stringify({
                    file:name
                })
            }).then(async (res)=>{
                let data=await res.blob()
                console.log(data)
                const filename=name
                // console.log(res.data)
                // console.log(res.headers)
                const blob=new Blob([data])

                // //获取文件名
                // const fileName = res.headers["content-disposition"].split(";")[1].split("=")[1]
                // const blob = new Blob([res.data]);
                // //创建一个a标签并设置href属性，之后模拟人为点击下载文件
                let link = document.createElement('a');
                document.body.appendChild(link)         // 没什么效果，remove
                link.href = window.URL.createObjectURL(blob);
                link.download = filename;//设置下载文件名
                link.click();//模拟点击
                // //释放资源并删除创建的a标签
                URL.revokeObjectURL(link.href);
                document.body.removeChild(link)
            })
        })


    }

    $:{
        console.log(files)
    }
    let openAlert=false;
    let alert={
        msg:'',
        color:''
    }

    $:{
        if(openAlert){
            setTimeout(() => {
                openAlert=false
            }, 1500);
        }else{
            getFile()
            selectedRowIds=[]
        }
    }
</script>


<span>
    <AModal bind:open={open} let:closeCallback>
        <div>
    <ADialog title="确定删除?" {closeCallback}>
        <div style="display: flex;justify-content: center">
        <Button style="margin: 20px 5px 10px 5px">取消</Button>
        <Button on:click={()=>{delFile()}} style="margin: 20px 5px 10px 5px">确认</Button>
                </div>
    </ADialog>

            </div>
    </AModal>

      <Modal
            {opened}
                      on:close={() => (opened = false)}
                      title="Upload File!"
                      overlayOpacity={0.55}
                      overlayBlur={3}
              >
                  <FileDropzone bind:files/>
                  <div style="margin-top: 20px">
                      <Button fullSize on:click={()=>(upload())}>上传</Button>
                  </div>
          </Modal>
<Input
        icon={MagnifyingGlass}
        placeholder='Search'
        rightSectionWidth={70}
        styles={{ rightSection: { pointerEvents: 'none' }}}
        style="margin: 5px 5px 10px 5px"
>
    <Badge slot='rightSection' color='blue' variant='filled' size="sm">
        search
    </Badge>
    <!--    <Button slot='rightSection' variant="gradient" color="blue">搜索</Button>-->
</Input>
    <div style="display: flex;justify-content: flex-end">
        <Button on:click={() => (opened = true)} variant='gradient' color="blue" style="margin: 5px">upload</Button>
    <Button disabled={mBtn} on:click={downloadFile} variant='gradient' color="blue" style="margin: 5px">download</Button>
    <Button disabled={dBtn} on:click={() => { open = true;console.log(open);}} variant='outline' color="red" style="margin: 5px">delete</Button>
    </div>
</span>

{#if openAlert}
<Alert icon={InfoCircled} color={alert.color}>
    {alert.msg}
</Alert>
{/if}

<!--<InlineNotification-->
<!--        hideCloseButton-->
<!--        fullWidth-->
<!--        lowContrast-->
<!--        kind="success"-->
<!--        title="Success:"-->
<!--        subtitle="Your settings have been saved."-->
<!--/>-->
<!--    <ToastNotification-->
<!--            fullWidth-->
<!--            lowContrast-->
<!--            kind="success"-->
<!--            title="Success"-->
<!--            subtitle="Your settings have been saved."-->
<!--            caption={new Date().toLocaleString()}-->
<!--    />-->

<DataTable
        expandable
        selectable
        batchSelection
        bind:expandedRowIds
        bind:selectedRowIds
        headers={[
        { key: "name", value: "文件名" },
        { key: "size", value: "大小/B" },
        { key: "mode", value: "权限" },
        { key: "modtime", value: "上传时间" },
        ]}
        rows={allFiles}
>
    <svelte:fragment slot="expanded-row" let:row>
        <pre>{JSON.stringify(row, null, 2)}</pre>
    </svelte:fragment>
</DataTable>

<svelte:head>
    <link
            rel="stylesheet"
            href="../link/http_unpkg.com_carbon-components-svelte_css_white.css"
    />
    <!--    <link rel="stylesheet" href="./path/to/library/svelteit.min.css" />-->

</svelte:head>
